$(function () {
    // 1- 二级分类渲染
    // 2- 分页
    // 3- 添加二级分类 
  
    var currentPage = 1;
    var pageSize = 5;
    // 1- 二级分类渲染
    // 1- ajax去后台获取数据 
    // 2- 使用模板引擎渲染数据 
    function render () {
      $.ajax({
        type: 'get',
        url: '/category/querySecondCategoryPaging',
        data: {
          page: currentPage,
          pageSize: pageSize
        },
        dataType: 'json',
        success: function (res) {
          console.log(res);
          //渲染
          $('tbody').html(template('tmp', res));
          // 根据数据库返回真实的总数来生成分页
          setPage(res.total);
        }
      })
    }
    render();
  
    // 2-生成分页方法
    function setPage (total) {
      // 插件根据总数来生成分页标签
      $("#paginator").bootstrapPaginator({
        bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
        currentPage: currentPage,// 默认选中页码
        totalPages: Math.ceil(total / pageSize),//总页数      
        onPageClicked: function (event, originalEvent, type, page) {
          //为按钮绑定点击事件 page:当前点击的按钮值
          // 改变当前页取值 
          currentPage = page;
          // 重新渲染
          render();
        }
      });
    }
  
    // 3- 下拉列表填充 
    // ajax + 模板引擎 
    $.ajax({
      type: 'get',
      url: '/category/queryTopCategoryPaging',
      data: {
        page: 1,
        pageSize: 100
      },
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 渲染：
        $('.cate-one-list').html(template('tmp-one', res));
      }
    })
  
    // 4- 模拟下拉列表选中
    // 1- 给a标签绑定点击事件 ，当a标签被点击时： 
    // 2- 获取a标签的文本，赋值给按钮的文本 
    // 3- 获取a标签对应id， 赋值给隐藏域
    $('.cate-one-list').on('click', 'a', function () {
      $('.cate-btn').text($(this).text());
      $('#categoryId').val($(this).data('id'));
    })
      //图片上传
     $('#file').fileupload({
       dataType:'json',
       done:function (e,data) {
        //  图片预览
        var url = data.result.picAddr;
      $('#img').attr('src',url);
      //隐藏图片地址
      $('#brandLogo').val(url);
       // 2- 在图片预览完成， 手动恢复图片的校验状态
       $('.form-add').data('bootstrapValidator').updateStatus('brandLogo', 'VALID');
      }
       
     })
     // 非空检验
     $('.form-add').bootstrapValidator({
      //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
      excluded: [':disabled'],
  
      //2. 指定校验时的图标显示，默认是bootstrap风格
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
  
      //3. 指定校验字段
      fields: {
        //校验用户名，对应name表单的name属性
        categoryId: {
          validators: {
            //不能为空
            notEmpty: {
              message: '请选择一级分类'
            }
          }
        },
        brandName: {
          validators: {
            //不能为空
            notEmpty: {
              message: '请输入二级分类'
            }
          }
        },
        brandLogo: {
          validators: {
            //不能为空
            notEmpty: {
              message: '请上传图片'
            }
          }
        }
      }
  
    });

    // 7-- 手动恢复图片和下拉列表校验状态
  // 1- 下拉列表选中后，手动恢复下拉列表的校验状态 
  // 2- 在图片预览完成， 手动恢复图片的校验状态

  // 8-添加二级分类  
  //   1- 点击按钮，在表单数据校验通过情况下，获取数据，发送给后台   success.form.bv事件 
  //   2- 添加成功后面， 页面重新渲染 隐藏模态框， 表单重置  

  $('.form-add').on('success.form.bv', function (e) {
    e.preventDefault(); //阻止默认行为 
    $.ajax({
      type: 'post',
      url: '/category/addSecondCategory',
      data: $('.form-add').serialize(),
      dataType: 'json',
      success: function (res) {
        console.log(res);
        // 页面重新渲染 
        render();
        // 隐藏模态框，
        $('.modal-add').modal('hide');
        // 表单重置  数据和校验样式
        $('.form-add').data('bootstrapValidator').resetForm(true);
        // 手动恢复图片和按钮文字
        $('#img').attr('src', 'images/none.png');
        $('.cate-btn').text('请选择一级分类');
      }
    })
  })
  })